<template>
  <div class="order_import">
    <p>支付订单导入</p>
    <div>
      <ul>
        <li>批量导入流程</li>
        <li>1. 下载数据来源：微信数据：微信商户号登录，在交易订单、退款查询页面选择时间后，下载csv文件 支付宝： 支付宝商户号登录，在卖出交易、卖出退款页面选择时间后，下载csv文件</li>
        <li>2. 依照模板格式，导入支付数据；</li>
        <li>3.上传文件</li>
      </ul>
    </div>
    <div class="upload">
      <el-upload
        class="upload-demo"
        ref="upload"
        :limit="1"
        accept=".csv"
        :on-change="uploadChange"
        :on-remove="uploadRemove"
        :action="uploadAction"
        :file-list="fileList"
        :auto-upload="false"
      >
        <el-button slot="trigger" size="mini" type="primary">
          <i class="el-icon-upload"></i>选择上传文件
        </el-button>
        <span slot="tip" class="tips">格式仅支持.csv格式文件</span>
      </el-upload>
      <el-button class="submit" type="primary" size="mini" @click="uploadExcel">上传文件</el-button>
    </div>
  </div>
</template>

<script>
import excel from "@/assets/icon/excel.png";
import api from "@/api/apiPath";
export default {
  name: "importFile",
  data() {
    return {
      image: excel,
      fileList: [],
      uploadAction: ""
    };
  },
  methods: {
    uploadChange(file, fileList) {
      this.fileList = fileList;
    },
    uploadRemove() {
      this.fileList = [];
    },
    uploadExcel() {
      if (this.fileList.length === 0) {
        this.$message({
          message: "请先选择上传文件！",
          type: "warning"
        });
        return false;
      }
      let nameArr = this.fileList[0].name.split(".");
      let suffix = nameArr[nameArr.length - 1];
      if (suffix !== "csv") {
        this.$message({
          message: "请上传文件后缀为.csv的文件！",
          type: "warning"
        });
        return false;
      } else {
        let param = new FormData();
        param.append("file", this.fileList[0].raw);
        this.$axios
          .post("/raise/dealingOpposingOrder/billUpload", param)
          .then(res => {
            this.$message({
              type: "success",
              message: "导入成功"
            });
            this.$router.push("./importRecord");
          });
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.order_import {
 ul, li {
   font-size 14px
   line-height 40px
 }
 .upload {
   margin-left 40px;
   font-size 14px;
   .el-icon-upload {
     margin-right: 5px;
   }
   .tips {
     margin-left 15px;
   }
   .submit {
     margin-top 25px;
   }
 }
}
</style>